<template>
	<view>
		<!-- 个人中心 -->
		<!-- <view v-if="isLogin && user"> -->
		
		<view v-if="user && user.nickname">
			<view class="myTop-wrapper">
				<u-navbar :is-back="false"
					title-color="#FFFFFF"
					:background="{ background: '#96968c' }"
					:border-bottom="false"
					title="个人中心">
					<view slot="right" class="mr_4" @click="goMyMenu">
						<u-badge :absolute="true" :offset="[10,10]" class="icon-index" size="mini" type="error" :count="18"></u-badge>
						<u-icon class="mr_1" size="50" color="#ffffff" name="list"></u-icon>
					</view>
				</u-navbar>
				
				<!-- 用户头像和名字 -->
				<view class="avatar-box flex-layout flex-center mb_4">
					<u-avatar :show-sex="user.gender == 1 || user.gender == 2" :sex-icon="user.gender == 1 ? 'man' : 'woman' " :src="user.avatarUrl" mode="circle" size="90"></u-avatar>
					<view class="user-name-box">
						<view class="user-name mb_2">{{user.nickname}}</view>
						<u-tag :text="'VIP.' + user.vipType" size="mini" bg-color="#a3a5a1" color="#ffffff" border-color="transparent" shape="circle"></u-tag>
					</view>
				</view>
				
				<view class="option-grid mt_4 mb_4">
					<u-grid :col="4" :border="false">
						<u-grid-item v-for="(item,index) in optionGridList" :key="index" bg-color="transparent">
							<view>
								<u-icon size="55" color="#ffffff" :name="item.icon"></u-icon>
							</view>
							<view class="option-text mt_2 mb_4">{{ item.text }}</view>
						</u-grid-item>
					</u-grid>
				</view>
			</view>
			
			<view class="myBottom-wrapper">
				<!-- 我的音乐 -->
				<u-card class="music-card" :border="false">
					<view slot="head" class="flex-layout">
						<view class="music-title">我的音乐</view>
						<view class="music-title-icon">></view>
					</view>
					<view class="music-row" slot="body">
						<u-row gutter="16">
							<u-col span="4">
								<view class="row-item">
									<u-image border-radius="15" width="100%" height="300rpx" src="/static/image/my/vertical_bg.jpeg" ></u-image>
									<view class="center-text flex-column flex-center">
										<u-icon size="50" color="#FF6340" name="heart-fill"></u-icon>
										<view class="text mt_2">我喜欢的音乐</view>
									</view>
								</view>
							</u-col>
							
							<u-col span="4">
								<view class="row-item">
									<u-image border-radius="15" width="100%" height="300rpx" src="/static/image/my/vertical_bg2.jpeg" ></u-image>
									<view class="center-text flex-column flex-center">
										<u-icon size="50" color="#ffffff" name="play-circle"></u-icon>
										<view class="text mt_2">私人的FM</view>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</u-card>
				
				<!-- 最近播放 -->
				<u-card class="music-card" :border="false">
					<view slot="head" class="flex-layout">
						<view class="music-title">最近播放</view>
					</view>
					<view class="music-row" slot="body">
						<u-row gutter="16">
							<u-col span="6">
								<view class="row-item-square flex-layout">
									<view class="left">
										<u-image border-radius="15" width="120rpx" height="120rpx" src="/static/image/my/vertical_bg.jpeg"></u-image>
										<view class="center-text flex-column flex-center">
											<u-icon size="55rpx" color="#ff9d9d" name="play-circle-fill"></u-icon>
										</view>
									</view>
									<view class="right flex-column">
										<view>全部已播歌曲</view>
										<view class="bottom">300首</view>
									</view>
								</view>
							</u-col>
							
							<u-col span="6">
								<view class="row-item-square flex-layout">
									<view class="left">
										<u-image border-radius="15" width="120rpx" height="120rpx" src="/static/image/my/vertical_bg.jpeg"></u-image>
										<view class="center-text flex-column flex-center">
											<u-icon size="55rpx" color="#ff9d9d" name="play-circle-fill"></u-icon>
										</view>
									</view>
									<view class="right flex-column">
										<view>歌单：令人上瘾的电音</view>
										<view class="bottom">继续播放</view>
									</view>
								</view>
							</u-col>
						</u-row>
					</view>
				</u-card>
				
				<!-- 创建歌单 -->
				<u-card class="music-card" :border="false" >
					<view slot="head" class="flex-layout">
						<view class="music-title">创建歌单</view>
						<view class="right-icon">
							
							<u-icon name="more-dot-fill" @click="onShowCreate= true"></u-icon>
						</view>
					</view>
					<view class="music-row" slot="body">
						<u-row gutter="16">
							<u-col span="6">
								<view class="row-item-square flex-layout">
									<view class="left">
										<u-image border-radius="15" width="120rpx" height="120rpx" src="/static/image/my/vertical_bg.jpeg"></u-image>
										<view class="center-text flex-column flex-center">
											<u-icon size="55rpx" color="#ff9d9d" name="play-circle-fill"></u-icon>
										</view>
									</view>
									<view class="right flex-column">
										<view>2019年度歌单</view>
										<view class="bottom">10首</view>
									</view>
								</view>
							</u-col>
							
							<u-col span="6">
								<view class="row-item-square flex-layout">
									<view class="left">
										<u-image border-radius="15" width="120rpx" height="120rpx" src="/static/image/my/vertical_bg.jpeg"></u-image>
										<view class="center-text flex-column flex-center">
											<u-icon size="55rpx" color="#ff9d9d" name="play-circle-fill"></u-icon>
										</view>
									</view>
									<view class="right flex-column">
										<view>全部已播歌曲</view>
										<view class="bottom">300首</view>
									</view>
								</view>
							</u-col>
							
						</u-row>
					</view>
				</u-card>
				
			</view>
			
			<button type="default" @click="tuichu">退出登录</button>
			
		</view>
		
		<!-- 登录 -->
		<view class="login" v-else>
			<view class="content">
				<!-- 头部logo -->
				<view class="header">
					<image :src="logoImage"></image>
				</view>
				<view class="m_a">邮箱暂时不可以，请用网易云的手机和密码登录</view>
				
				<!-- 主体表单 -->
				<view class="main">
					<yh-input
						v-model="phoneData"
						type="text"
						maxlength="11"
						placeholder="手机/邮箱"
						:focus="isFocus"
					></yh-input>
					<yh-input
						v-model="passData"
						type="password"
						maxlength="20"
						placeholder="密码"
					></yh-input>
				</view>
				<yh-button 
					class="wbutton"
					text="登 录"
					:rotate="isRotate" 
					@click="startLogin"
				></yh-button>
				
				<!-- 其他登录 -->
				<view class="other_login cuIcon">
					<view class="login_icon">
						<view class="cuIcon-weixin" @tap="login_weixin"></view>
					</view>
					<view class="login_icon">
						<view class="cuIcon-weibo" @tap="login_weibo"></view>
					</view>
					<view class="login_icon">
						<view class="cuIcon-github" @tap="login_github"></view>
					</view>
				</view>
				
				<!-- 底部信息 -->
				<view class="footer">
					<navigator url="forget" open-type="navigate">找回密码</navigator>
					<text>|</text>
					<navigator url="register" open-type="navigate">注册账号</navigator>
				</view>
			</view>
		</view>
		
	</view>
</template>

<script>
	let _this;
	
	export default {
		data() {
			return {
				//logo图片 base64
				logoImage: '/static/image/login/login.png',
				phoneData:'', 		//用户/电话
				passData:'', 		//密码
				isRotate: false, 	//是否加载旋转
				isFocus: true ,		// 是否聚焦
				isLogin: false,		// 是否登录
				user: [],			//个人数据
				optionGridList: [
					{text: '本地音乐', icon:'play-circle',},
					{text: '下载管理', icon:'download',},
					{text: '我的电台', icon:'kefu-ermai',},
					{text: '收藏歌单', icon:'star',},
				],
				woman: "woman"
			}
		},
		watch:{
		},
		onShow() {
			uni.getStorage({
				key: 'user',
				success:(res)=> {
					// this.isLogin = true;
					
					this.user = res.data.profile
					uni.setNavigationBarTitle({
					    title: '个人中心'
					});
					uni.setTabBarItem({
						index:1,
						text: '个人中心',
					})
					document.getElementsByTagName('uni-page-head')[0].style.display = 'none'  
				}
			})
		},
		mounted() {
			_this= this;
			//this.isLogin();
		},
		methods: {
			
			// 退出登录 测试 需要删除
			tuichu(){
				this.user = []
				uni.removeStorage({
					key: "user",
					success(res) {
						console.log("删除成功")
					}
				})
			},
			// 去到我的更多菜单
			goMyMenu() {
				console.log("去到我的更多菜单")
			},
			
				// isLogin(){
				// 	判断缓存中是否登录过，直接登录
				// 	try {
				// 		const value = uni.getStorageSync('setUserData');
				// 		if (value) {
				// 			//有登录信息
				// 			console.log("已登录用户：",value);
				// 			_this.$store.dispatch("setUserData",value); //存入状态
				// 			uni.reLaunch({
				// 				url: '../../../pages/index',
				// 			});
				// 		}
				// 	} catch (e) {
				// 		// error
				// 	}
				// },
			    async startLogin(e){
					//登录
					if(this.isRotate){
						//判断是否加载中，避免重复点击请求
						return false;
					}
					if (this.phoneData.length == "") {
					     uni.showToast({
					        icon: 'none',
							position: 'bottom',
					        title: '用户名不能为空'
					    });
					    return;
					}
			        if (this.passData.length < 5) {
			            uni.showToast({
			                icon: 'none',
							position: 'bottom',
			                title: '密码不正确'
			            });
			            return;
			        }
					
					let data = {
						phone: this.phoneData,
						password: this.passData
					}
					
					
					// 加载动画
					// this.isLogin = true
					// _this.isRotate=true
					// setTimeout(function(){
					// 	_this.isRotate=false
					// },500)
					let _loginCellphone = await this.$api.loginCellphone({data})
					// this.user = _loginCellphone
					uni.setStorage({
						key: "user",
						data: _loginCellphone,
						success:(res) => {
							window.location.reload()
						}
					})

					
					


					// uni.showLoading({
					// 	title: '登录中'
					// });
					// getLogin()
					// .then(res => {
					// 	//console.log(res)
					// 	//简单验证下登录（不安全）
					// 	if(_this.phoneData==res.data.username && _this.passData==res.data.password){
					// 		let userdata={
					// 			"username":res.data.username,
					// 			"nickname":res.data.nickname,
					// 			"accesstoken":res.data.accesstoken,
					// 		} //保存用户信息和accesstoken
					// 		_this.$store.dispatch("setUserData",userdata); //存入状态
					// 		try {
					// 			uni.setStorageSync('setUserData', userdata); //存入缓存
					// 		} catch (e) {
					// 			// error
					// 		}
					// 		uni.showToast({
					// 			icon: 'success',
					// 			position: 'bottom',
					// 			title: '登录成功'
					// 		});
					// 		uni.reLaunch({
					// 			url: '../../../pages/index',
					// 		});
					// 	}else{
					// 		_this.passData=""
					// 		uni.showToast({
					// 			icon: 'error',
					// 			position: 'bottom',
					// 			title: '账号或密码错误，账号admin密码admin'
					// 		});
					// 	}
					// 	uni.hideLoading();
					// }).catch(err => {
					// 	uni.hideLoading();
					// })
					
			    },
				login_weixin() {
					//微信登录
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '...'
					});
				},
				login_weibo() {
					//微博登录
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '...'
					});
				},
				login_github() {
					//github登录
					uni.showToast({
						icon: 'none',
						position: 'bottom',
						title: '...'
					});
				}
			
			
		}
	}
</script>

<style>
	@import url("/static/css/login/icon.css");
	@import url("/static/css/login/main.css");
	
	.myTop-wrapper{
		background-image: linear-gradient(#96968c 40%,#adada2)
	}
	.avatar-box{
		padding: 40rpx;
		color: #FFFFFF;
	}
	.avatar-box .user-name-box{
		flex: 1;
		padding: 0 40rpx;	
	}
	.avatar-box .user-name{
		font-size: 35rpx;
		font-weight: bolder;
	}
	
	.option-text{
		font-size: 22rpx;
		color: #ffffff;
	}
	
	.myBottom-wrapper{
		min-height: 1200rpx;
		background-color: #ffffff;
		position: relative;
		top: -50rpx;
		border-radius: 40rpx 40rpx 0 0;
	}
	
	.music-card .music-title{
		flex: 1;
		font-size: 30rpx;
		font-weight: bolder;
	}
	.music-card .music-title-icon{
		color: #555555;
		font-weight: bolder;
	}
	.music-row .row-item{
		border-radius: 18rpx;
		position: relative;
	}
	.music-row .row-item .center-text{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		font-size: 20rpx;
		color: #fff;
	}
	.music-row .row-item .center-text .text{
		letter-spacing: 2rpx;
	}
	/* .u-avatar__sex{
		width: 4rpx !important;
		height: 20rpx !important;
	} */
	
	/* 正方形 */
	.music-row .row-item-square{
		position: relative;
	}
	.music-row  .row-item-square:active::before{
		content: '';
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		background-color: rgba(0,0,0,.2);
		z-index: 99;
	}
	.music-row .row-item-square .left{
		position: relative;
	}
	
	.music-row .row-item-square .center-text{
		width: 100%;
		height: 100%;
		position: absolute;
		top: 0;
		left: 0;
		z-index: 99;
		font-size: 22rpx;
		color: #000;
	}
	.music-row .row-item-square .right{
		padding-left: 16rpx;
		font-size: 22rpx;
		justify-content: center;
		align-items: flex-start;
		font-weight: bolder;
		color: #333;
	}
	.music-row .row-item-square .right .bottom{
		margin-top: 10rpx;
		color: #808080;
		font-size: 20rpx;
	}

</style>
